<template>
  <div class="category-head">
    <img
      src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/logo/h-transparent-v584ea975.svg"
      class="category-logo"
    />
    <div class="category-head-right">
      <span>登录查看优惠价</span>
      <span>成为房东</span>
      <span>下载APP</span>
    </div>
  </div>
  <div class="carousel">
    <el-carousel height="242px" width="100%">
      <el-carousel-item v-for="item in carouselList" :key="item">
        <img :src="item" />
      </el-carousel-item>
    </el-carousel>
  </div>

  <div class="search-hotel-wrap">
    <div class="search-date">
      <div class="search-city">
        深圳
        <span class="iconfont icon-xiala"></span>
      </div>

      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="入住"
        start-placeholder="开始时间"
        end-placeholder="离开时间   1晚"
      />
      <button class="search-hotel" @click="goHotelDetail">查找民宿</button>
    </div>
  </div>
  <div class="hotel-theme">
    <h2 class="theme-title">主题精选</h2>
    <ul class="theme-item">
      <li v-for="theme in themeLst" :key="theme">
        <img :src="theme.url" class="theme-img" />
        <div>{{ theme.title }}</div>
      </li>
    </ul>
  </div>
  <div class="insurance">
    <ul class="insurance-warp">
      <li>
        <div class="iconfont icon-jiudian"></div>
        <h5>放心住</h5>
        <div class="insurance-text">千万保障先行赔付</div>
      </li>
      <li>
        <div class="iconfont icon-xiaoshi"></div>
        <h5>贴心服务</h5>
        <div class="insurance-text">7*24小时服务</div>
      </li>
      <li style="border: none">
        <div class="iconfont icon-buhuanlingdengjizhengshu"></div>
        <h5>信任认证</h5>
        <div class="insurance-text">实名认证更放心</div>
      </li>
    </ul>
  </div>
  <div class="hot-city">
    <dl class="hot-city-name">
      <dt>热门城市</dt>
      <dd
        v-for="(cityHotel, index) in cityHotelList"
        :key="index"
        class="hot-city-item"
      >
        <a href="javascript:;">{{ cityHotel }}</a>
      </dd>
    </dl>
    <dl class="hot-city-name">
      <dt>热门城市</dt>
      <dd
        v-for="(cityHotel, index) in hotHouseList"
        :key="index"
        class="hot-city-item"
      >
        <a href="javascript:;">{{ cityHotel }}</a>
      </dd>
    </dl>
  </div>
  <footer class="hotel-footer">
    <div class="footer-item">
      <h5>公司信息</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">关于我们</a>
        </li>
        <li>
          <a href="javascript:;">工作机会</a>
        </li>
      </ul>
    </div>
    <div class="footer-item">
      <h5>网站帮助</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">规则中心</a>
        </li>
        <li>
          <a href="javascript:;">网站地图</a>
        </li>
        <li>
          <a href="javascript:;">民宿推荐</a>
        </li>
      </ul>
    </div>
    <div class="footer-item">
      <h5>人工客服</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">客服电话</a>
          <span class="footer-num">400-0660-190</span>
        </li>
        <li>
          <a href="javascript:;">登录问题</a>
          <span class="footer-num">10107888</span>
        </li>
      </ul>
    </div>
    <div class="footer-item erweima">
      <img
        src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/qrcodes/app-download-v56bda98f.svg"
        class="weixin"
      />
      <img
        src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/common-assets/2018/pureicon/favicon-32.png"
        class="meituan-logo"
      />
      <div>下载美团民宿APP</div>
    </div>
  </footer>
  <div class="footer-record">
    <img
      src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png"
    />
    <div>沪公网安备31010502000052号 沪B2-20040012 营业资质</div>
  </div>
</template>

<script>
export default {
  name: "MCategory",
};
</script>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const value1 = ref("");

const carouselList = [
  "https://img.meituan.net/iphoenix/fae12ad6cb45735f4835276ada9cb062167115.jpg.webp@2880w_460h_80Q_1e_1c",
  "https://img.meituan.net/iphoenix/09ec58e3673a4d6aceabd9e1151781f95251800.png.webp@2880w_460h_80Q_1e_1c",
  "https://p0.meituan.net/scarlett/702ba21c6ee7f088625b01f3b4e46b09537984.jpg.webp@2880w_460h_80Q_1e_1c",
  "https://p0.meituan.net/scarlett/082bc697bf06e8475b738bec094607a9434582.jpg.webp@2880w_460h_80Q_1e_1c",
];
const themeLst = [
  {
    title: "少女风",
    url: "https://img.meituan.net/iphoenix/ae43e7d5eceebb43844c6e06011edab7478053.png@446w_446h_80Q_1e_1c",
  },
  {
    title: "日系清新",
    url: "https://img.meituan.net/iphoenix/90a50d2c2abf18f065c937bf06e42284408607.png@446w_446h_80Q_1e_1c",
  },
  {
    title: "聚会轰趴",
    url: "https://img.meituan.net/iphoenix/c335be7c76121a96307701a12999e405448447.png@446w_446h_80Q_1e_1c",
  },
];
const cityHotelList = [
  "北京的民宿",
  "上海的民宿",
  "南京的民宿",
  "杭州的民宿",
  "厦门的民宿",
  "武汉的民宿",
  "长沙的民宿",
  "广州的民宿",
  "深圳的民宿",
  "三亚的民宿",
];

const hotHouseList = [
  "有厨具的民宿",
  "有洗衣机的民宿",
  "有今夜特价的民宿",
  "有限时折扣的民宿",
  "适合情侣的民宿",
  "视野开阔的民宿",
  "别墅",
  "复式loft",
  "度假民宿",
];

// 点击查找跳转到详情页
const router = useRouter();
const goHotelDetail = () => {
  if (value1.value) {
    router.push({
      name: "HotelDetail",
    });
  } else {
    ElMessage.success("添加用户成功");
  }
};
</script>
<style scoped>
* {
  margin: 0 auto;
}
.category-head {
  width: 1200px;
  height: 70px;
  display: flex;
  align-items: center;
}
.category-logo {
  width: 142px;
  height: 70px;
  margin-left: 0;
}
.category-head-right {
  width: 280px;
  display: flex;
  margin-right: 0;
  justify-content: space-between;
  font-size: 14px;
  color: #585a5a;
}
.search-hotel-wrap {
  position: absolute;
  left: 0;
  top: 230px;
  width: 100%;
  height: 57px;
  display: flex;
  justify-content: center;
}
.search-date {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
}
.search-city {
  width: 200px;
  height: 57px;
  line-height: 57px;
  text-align: center;
  font-size: 16px;
  color: #252626;
  border-right: 1px solid #e1e4e6;
}
.search-date :deep(.el-date-editor) {
  box-shadow: none;
}
.icon-xiala {
  font-size: 12px;
  color: #565555;
}
.demo-date-picker {
  width: 426px;
  text-align: center;
}
.search-hotel {
  font-size: 18px;
  padding: 10px 22px;
  color: #333;
  background-color: #ffdc2b;
  border: none;
  margin: 0 10px;
  border-radius: 5px;
}
.hotel-theme {
  width: 1200px;
  padding: 40px 15px;
  box-sizing: border-box;
}

.theme-title {
  font-size: 24px;
  color: #252626;
  font-family: inherit;
  margin-bottom: 16px;
}
.theme-item {
  display: flex;
}
.theme-item li {
  margin: 0;
  padding: 0;
  position: relative;
}
.theme-item div {
  position: absolute;
  left: 15px;
  bottom: 15px;
  font-size: 18px;
  color: #fff;
}
.theme-img {
  width: 223px;
  height: 223px;
  margin-right: 16px;
  border-radius: 10px;
}
.insurance {
  width: 1200px;
  height: 90px;
  padding: 0 15px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.insurance-warp {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.insurance-warp li {
  width: 390px;
  text-align: center;
  border-right: 1px solid #e1e6ea;
}
.insurance-warp .iconfont {
  font-size: 40px;
  color: #666666;
}
.insurance-warp h5 {
  color: #666;
  font-size: 18px;
  padding: 5px 0;
}
.insurance-text {
  color: #999;
  font-size: 14px;
}
.hot-city {
  width: 1200px;
  padding: 40px 0 40px 15px;
  box-sizing: border-box;
}
.hot-city-name {
  padding-bottom: 20px;
}
.hot-city-name dt {
  display: inline-block;
  width: 96px;
  font-size: 14px;
  color: #333;
  font-weight: 700;
}
.hot-city-item {
  display: inline;
  font-size: 14px;
  color: #666;
  padding-right: 35px;
}
.hotel-footer {
  width: 1200px;
  padding: 0 30px 40px 15px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.footer-item {
  text-align: left;
  margin: 0;
  padding-right: 20px;
}
.footer-item h5 {
  font-weight: 700px;
  font-size: 18px;
  color: #333;
  padding: 10px 0 15px 0;
}
.footer-text {
  font-size: 14px;
  color: #7d7e80;
}
.footer-text li {
  margin: 10px 0;
}
.footer-num {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-left: 5px;
}
.weixin {
  width: 130px;
  height: 130px;
}
.erweima {
  position: relative;
}
.erweima div {
  font-size: 12px;
  color: #333;
}
.meituan-logo {
  position: absolute;
  top: 35%;
  left: 34%;
}
.footer-record {
  width: 1200px;
  height: 54px;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.footer-record div {
  font-size: 14px;
  color: #7d7e80;
  margin: 0;
}
.footer-record img {
  margin: 0;
  width: 14px;
  height: 14px;
  padding-right: 5px;
}
</style>
